<!--
 * @Author: wuyuxin
 * @Date: 2023-10-13 14:37:50
 * @LastEditors: wuyuxin
 * @LastEditTime: 2023-10-16 16:04:26
 * @Description: 
-->
<template>
  <div class="tab-bar">
    <van-tabbar v-model="currentIndex" active-color="#ff9854" route>
      <template v-for="(item, index) in TabbarData" :key="index">
        <van-tabbar-item :to="item.path">
          <template #default>
            <span>{{ item.text }}</span>
          </template>
          <template #icon>
            <img v-if="currentIndex === index" :src="getAssetURL(item.imageActive)"/>
            <img v-else :src="getAssetURL(item.image)"/>
          </template>
        </van-tabbar-item>
      </template>
    </van-tabbar>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import TabbarData from '@/assets/data/tabbar';
import { getAssetURL } from '@/utils/loadAssets'
import { useRoute } from 'vue-router'

const currentIndex = ref(0)

const route = useRoute()
console.log(route)

watch(route, (newValue, oldValue) => {
  TabbarData.forEach((item, index) => {
    if (item.path === newValue.path) {
      currentIndex.value = index
    }
  })
}, {
  immediate: true,
  deep: true
})

</script>


<style lang="less" scoped>
.tab-bar {
  img {
    height: 26px;
  }
}

</style>